<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include::header"></head>
<body>
	<div class="layui-fluid layui-padding10 layui-bg-gray">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-xs4">
				<div class="layui-card">
					<div class="layui-card-header">实时监控</div>
					<div class="layui-card-body">
						<h4 class="layui-margin10">
							可使用最大内存(
							<span th:text="${usableMemory}"></span>
							/
							<span th:text="${maxMemory}"></span>
							)
						</h4>
						<div class="layui-progress layui-progress-big" lay-showPercent="yes">
							<div class="layui-progress-bar layui-bg-green" th:attr="lay-percent=${physics}"></div>
						</div>
						<h4 class="layui-margin10">
							可分配内存(
							<span th:text="${freeMemory}"></span>
							/
							<span th:text="${totalMemory}"></span>
							)
						</h4>
						<div class="layui-progress layui-progress-big" lay-showPercent="yes">
							<div class="layui-progress-bar layui-bg-blue" th:attr="lay-percent=${distribute}"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs4">
				<div class="layui-card">
					<div class="layui-card-header">内存详情</div>
					<div class="layui-card-body">
						<table class="layui-table">
							<tbody>
								<tr>
									<td>线程数</td>
									<td th:text="${threadCount}"></td>
								</tr>
								<tr>
									<td>Jvm 分配内存</td>
									<td th:text="${totalMemory}"></td>
								</tr>
								<tr>
									<td>Jvm 剩余内存</td>
									<td th:text="${freeMemory}"></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="layui-col-xs4">
				<div class="layui-card">
					<div class="layui-card-header">项目地址</div>
					<div class="layui-card-body">
						<table class="layui-table">
							<tbody>
								<tr>
									<td>作者</td>
									<td>超君子</td>
								</tr>
								<tr>
									<td>版本</td>
									<td>1.0.6</td>
								</tr>
								<tr>
									<td>链接</td>
									<td>
										<a style="color: #1E9FFF;" href="https://github.com/chaojunzi/chao-cloud-admin"
											target="_blank">https://github.com/chaojunzi/chao-cloud-admin</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="layui-col-xs8">
				<div class="layui-card">
					<div class="layui-card-header">请求列表统计</div>
					<div class="layui-card-body">
						<div id="main" class="layui-main-height380"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs4">
				<div class="layui-card">
					<div class="layui-card-header">请求列表概览</div>
					<div class="layui-card-body">
						<div id="radar" class="layui-main-height380"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div th:include="include::footer"></div>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<script type="text/javascript">
		layui.config({
			base : '/echarts/'
		}).use([ 'layer', 'jquery', 'echarts', 'element' ], function() {
			var $ = layui.$, layer = layui.layer, element = layui.element;
			var echarts = layui.echarts;
			//记得这是dom对象不是JQ对象，需要转换
			echart = layui.echarts.init($('#main')[0]);
			$.get("/echarts/statRequestTime", function(data) {
				var result = data.body;
				console.log(result);
				if (data.retCode != '0000') {
					layer.msg(data.retMsg, {
						time : 5000, //5s后自动关闭
					})
					return false;
				}
				option = {
					title : {
					//text : '操作方法执行时间统计',
					//subtext : '纯属虚构'
					},
					tooltip : {
						trigger : 'axis',
						axisPointer : {
							type : 'line',
							lineStyle : {
								color : '#48b',
								width : 3,
								type : 'solid'
							},
							crossStyle : {
								color : '#1e90ff',
								width : 1,
								type : 'dashed'
							},
							shadowStyle : {
								color : 'rgba(150,150,150,0.3)',
								width : 'auto',
								type : 'default'
							}
						},
						formatter : function(params, ticket, callback) {
							var res = '<i class="layui-icon layui-icon-star-fill"></i> ' + params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								res += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + ' ms';
							}
							return res;
						}
					},
					legend : {
						data : result.legendData,
						x : '100', // 'center' | 'left' | {number},
						y : 'top', // 'center' | 'bottom' | {number}
						textStyle : {
							fontSize : 14
						}
					},
					toolbox : {
						x : '500', // 'center' | 'left' | {number},
						y : 'top', // 'center' | 'bottom' | {number}
						itemSize : 16,
						color : [ '#1e90ff', '#22bb22', '#4b0082', '#d2691e' ],
						show : true,
						feature : {
							mark : {
								show : true
							},
							magicType : {
								show : true,
								type : [ 'line', 'bar', 'stack', 'tiled' ]
							},
							restore : {
								show : true
							},
							saveAsImage : {
								show : true
							}
						}
					},
					calculable : true,
					xAxis : [ {
						type : 'category',
						boundaryGap : false,
						axisLine : {
							lineStyle : {
								color : '#48b',
								width : 3,
								type : 'solid'
							}
						},
						axisLabel : {
							textStyle : {
								fontWeight : 'bold',
								fontSize : 12
							}
						},
						splitLine : {
							show : true,
							lineStyle : {
								color : [ "#F5F5F5" ],
								width : 1,
								type : 'solid'
							}
						},
						data : result.xAxisData
					} ],
					yAxis : [ {
						type : 'value',
						axisLine : {
							lineStyle : {
								color : '#48b',
								width : 3,
								type : 'solid'
							}
						},
						splitArea : {
							show : true,
							areaStyle : {
								color : [ 'rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)' ]
							}
						},
						axisLabel : {
							textStyle : {
								fontWeight : 'bold',
								fontSize : 12
							},
							formatter : function(value) {
								return value + " ms";
							}
						},
						splitLine : {
							lineStyle : {
								color : [ "#F5F5F5" ],
								width : 1,
								type : 'solid'
							}
						}
					} ],
					series : [ {
						name : result.legendData[0],
						type : 'line',
						smooth : true,
						symbolSize : 8,
						itemStyle : {
							normal : {
								areaStyle : {
									type : 'default',
								}
							}
						},
						data : result.max
					}, {
						name : result.legendData[1],
						type : 'line',
						smooth : true,
						symbolSize : 8,
						itemStyle : {
							normal : {
								areaStyle : {
									type : 'default'
								}
							}
						},
						data : result.avg
					}, {
						name : result.legendData[2],
						type : 'line',
						smooth : true,
						symbolSize : 8,
						itemStyle : {
							normal : {
								areaStyle : {
									type : 'default'
								}
							}
						},
						data : result.min
					} ],
					color : [ '#87cefa', '#da70d6', '#40e0d0', ]
				};
				echart.setOption(option);
				//--->雷达图<---
				radar(result);
				//--->雷达图<---
			});

			function radar(data) {
				//雷达图
				radarEchart = layui.echarts.init($('#radar')[0]);
				radarOption = {
					title : {
					//text : '基础雷达图'
					},
					tooltip : {},
					legend : {
						data : data.legendData,
						type : 'scroll',
						orient : 'vertical',
						right : 0,
						top : 0,
						textStyle : {
							fontSize : 10
						}
					},
					radar : {
						// shape: 'circle',
						name : {
							textStyle : {
								color : '#fff',
								backgroundColor : '#999',
								borderRadius : 3,
								padding : [ 3, 5 ]
							}
						},
						indicator : [ {
							name : data.xAxisData[0],
						//max : data.max[0]
						}, {
							name : data.xAxisData[1],
						//max : data.max[1]
						}, {
							name : data.xAxisData[2],
						//max : data.max[2]
						}, {
							name : data.xAxisData[3],
						//max : data.max[3]
						}, {
							name : data.xAxisData[4],
						//max : data.max[4]
						}, {
							name : data.xAxisData[5],
						//max : data.max[5]
						}, {
							name : data.xAxisData[6],
						//max : data.max[6]
						} ]
					},
					series : [ {
						name : '请求时间',
						type : 'radar',
						// areaStyle: {normal: {}},
						data : [ {
							value : data.max,
							name : data.legendData[0]
						}, {
							value : data.avg,
							name : data.legendData[1]
						}, {
							value : data.min,
							name : data.legendData[2]
						} ]
					} ]
				};
				radarEchart.setOption(radarOption);
			}
		});
	</script>
</body>
</html>